<template>
    <view class="library-view-footer">
        <!-- 点评 -->
        <view class="comment-on">
            <han-icon name="star" size="36" />
            <text class="title">点击评论</text>
        </view>

        <view class="download">下载</view>

        <!-- 阅读按钮 -->
        <view class="reading-button">
            <text class="title">立即阅读</text>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
</script>

<style scoped lang="scss">
.library-view-footer {
    position: fixed;
    display: flex;
    align-items: center;
    z-index: 10;
    height: $han-footed-bar-height;
    border-top: 1rpx solid $han-global-border-color;
    bottom: 0;
    left: 0;
    right: 0;
    background: $han-global-bg-color;

    /* 适配iPhone安全区域 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);

    .comment-on {
        margin-left: 30rpx;
        display: flex;
        align-items: center;

        .title {
            margin-left: 10rpx;
            font-size: $han-font-size-base;
        }
    }

    .download {
        margin: auto;
    }

    .reading-button {
        text-align: center;
        margin-right: 30rpx;
        margin-left: auto;
        width: 40%;
        height: 70rpx;
        line-height: 70rpx;
        color: $han-global-bg-color;
        background: $han-primary-color;
        border-radius: 60rpx;
    }
}
</style>
